<template>
	<view class="item" :class="text=='select'?'items':''">
		<view class="top flex_row_start_top">
			<view class="left">
				<img v-if="type==1" :src="item.user.avatar!=''?item.user.avatar:initAvatarUser" alt="" class="img">
				<img v-if="type==2" :src="item.logo!=''?item.logo:initAvatarCorp" alt="" class="img">
				<view class="online" v-if="type==1&&text!='select'"></view>
			</view>
			<view class="right">
				<view class="rightInfo flex_row_btw_top">
					<view class="leftBox">
						<view class="user" v-if="type==1">
							{{item.user.nickname}}
						</view>
						<view class="user" v-if="type==2">
							{{item.company_name}}
						</view>
						<view class="style" v-if="type==1">
							{{item.style_text}}
						</view>

					</view>
					<view class="rightBox">
						<view class="closeItem" v-if="text=='select'" @tap="closeItem">
							×
						</view>
						<view v-else class="noSelectItem">
							<image src="../static/require/checked@2x.png" v-if="id==item.id"></image>
							<image src="../static/require/noCheck@2x.png" v-if="id!=item.id"></image>
						</view>

					</view>
				</view>
				<view class="bottomItem flex_row_btw_center">
					<view class="top flex_row_start_center">
						<view class="flex_row_start_center tip1" v-if="type==1">
							<img class="tipImg" src="@/static/require/jingyan@2x.png" alt="">
							<text class="tipText">{{item.work_year}}经验</text>
						</view>
						<view class="flex_row_start_center ">
							<img class="tipImg" src="@/static/require/anli@2x.png" alt="">
							<text class="tipText">案例{{item.case_num}}</text>
						</view>
					</view>
					<view class="price">
						免费
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';
	import initAvatarUser from '@/static/image/2.png'
	import initAvatarCorp from '@/static/image/corp@2x.png'
	const props = defineProps({
		item: Object,
		text: String,
		type: Number,
		id: String
	});
	const emit = defineEmits(['closeItem'])
	const closeItem = () => {
		emit('closeItem')
	}
</script>

<style lang="less" scoped>
	.item {
		background-color: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 28rpx;
		padding-top: 30rpx;
		padding-bottom: 33rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.left {
			position: relative;

			.img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;

			}

			.online {
				position: absolute;
				top: 70rpx;
				right: 0;
				width: 18rpx;
				height: 18rpx;
				background: #12E23F;
				border-radius: 50%;
				border: 3rpx solid #FFFFFF;
			}
		}

		.right {
			margin-left: 20rpx;
			width: calc(100% - 90rpx);

			.rightInfo {
				width: 100%;

				.leftBox {
					width: calc(100% - 80rpx);

					.user {
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;

					}

					.style {
						font-size: 24rpx;
						color: #666666;
						margin-top: 14rpx;
						word-break: break-word;
					}


				}

				.rightBox {

					.noSelectItem {
						width: 38rpx;
						height: 38rpx;
						background: #fff;
						color: #fff;
						text-align: center;

						image {
							width: 35rpx;
							height: 35rpx;
						}
					}


					.closeItem {
						line-height: 22rpx;
						text-align: center;
						height: 22rpx;
						font-size: 50rpx;
						color: #999;
					}
				}

			}

			.bottomItem {
				margin-top: 26rpx;

				.top {
					.tip1 {
						margin-right: 30rpx;
					}

					.tipImg {
						width: 26rpx;
						height: 26rpx;
						margin-right: 6rpx;
					}

					.tipText {
						font-weight: 400;
						font-size: 22rpx;
						color: #666666;
					}
				}
			}
		}
	}

	.items {
		background: none;
	}
</style>